<template>
    <div id="game">
        <MeowHeader :header-obj="headerObj"/>
        <div class="games">
            <mu-list v-for="item in list" :key="item.title" toggle-nested nested>
                <!-- 标题菜单 -->
                <mu-list-item button :ripple="false" nested class="animate__animated animate__bounceInLeft"
                              :open="item.open" @toggle-nested="item.open" @click="clickItem(item)">
                    <mu-list-item-action>
                        <span class="iconfont icon-folder"/>
                    </mu-list-item-action>
                    <mu-list-item-title>{{item.title}}</mu-list-item-title>
                    <!-- 子菜单 -->
                    <mu-list-item button :ripple="false" class="animate__animated animate__fadeInDown" slot="nested"
                                  v-for="sub in item.subs" :key="sub.title" :to="sub.path">
                        <mu-list-item-action>
                            <span class="iconfont icon-item"/>
                        </mu-list-item-action>
                        <mu-list-item-title>{{sub.title}}</mu-list-item-title>
                    </mu-list-item>
                </mu-list-item>
            </mu-list>
        </div>
    </div>
</template>

<script>
    import MeowHeader from "@/components/MeowHeader";
    export default {
        name: "game",
        components: {MeowHeader},
        data(){
            return{
                headerObj: {
                    title:"Game",
                },
                list: [{
                    title:'2048',
                    type:'2048',
                    open: true,
                    subs:[
                        {
                            title:'莽就完事了',
                            path:'/game/2048?type=direct',
                        },
                        {
                            title:'三思而后行',
                            path:'/game/2048',
                        },
                        {
                            title:'有备而来，不讲武德',
                            path:'/game/2048?type=wow',
                        },
                    ],
                },{
                    title:'扫雷',
                    type:'mineSweeper',
                    open: true,
                    subs:[
                        {
                            title:'简单难度(9×9)',
                            path:'/game/mineSweeper?type=easy',
                        },
                        {
                            title:'一般难度(9×16)',
                            path:'/game/mineSweeper?type=normal',
                        },
                        {
                            title:'大师难度(9×30)',
                            path:'/game/mineSweeper?type=hard',
                        },
                    ],
                }],
            }
        },
        mounted() {
            let type = this.$route.query.type;
            for(let i=1; i<this.list.length; i++){
                if (this.list[i].type === type){
                    this.list.map(item=>{
                        item.open = false;
                    });
                    this.list[i].open = true;
                    break;
                }
            }
        },
        methods:{
            clickItem(item){
                item.open = !item.open;
            }
        }
    }
</script>

<style scoped>

</style>
